<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps with AJAX Loader</title>
    <script src="http://www.google.com/jsapi"></script>
    <script src="../src/loader.js"></script>
    <script>
      google.load("maps", "2");
      google.setOnLoadCallback(mapsLoaded);

      function mapsLoaded () {
        if (google.maps.BrowserIsCompatible()) {
          map = new google.maps.Map2(document.getElementById("map"));
          map.addControl(new google.maps.SmallMapControl());
          map.setCenter(new google.maps.LatLng(48.25, 11.00), 4);
          map.enableDoubleClickZoom();
          google.extensions.maps.load("markermanager", "x", {uncompressed: true, callback: doWeatherDemo});
          google.extensions.maps.load("dragzoom", "x", {callback: addZoomer});
          google.extensions.maps.setOnloadCallback(function () {alert("All Libraries Loaded.");});
        }
      }

      function addZoomer () {
        map.addControl(new google.extensions.maps.DragZoom.Control());
      }

      function doWeatherDemo () {
        var IMAGES = [ "sun", "rain", "snow", "storm" ];
        var ICONS = [];
        function getWeatherIcon() {
          var i = Math.floor(IMAGES.length*Math.random());
          if (!ICONS[i]) {
            var icon = new google.maps.Icon();
            icon.image = "../markermanager/examples/images/" + IMAGES[i] + ".png";
            icon.iconAnchor = new google.maps.Point(16, 16);
            icon.infoWindowAnchor = new google.maps.Point(16, 0);
            icon.iconSize = new google.maps.Size(32, 32);
            icon.shadow = "../markermanager/examples/images/" + IMAGES[i] + "-shadow.png";
            icon.shadowSize = new google.maps.Size(59, 32);
            ICONS[i] = icon;
          }
          return ICONS[i];
        }
        function getRandomPoint() {
          var lat = 48.25 + (Math.random() - 0.5)*14.5;
          var lng = 11.00 + (Math.random() - 0.5)*36.0;
          return new google.maps.LatLng(Math.round(lat*10)/10, Math.round(lng*10)/10);
        }
        function getWeatherMarkers(n) {
          var batch = [];
          for (var i = 0; i < n; ++i) {
            batch.push(new google.maps.Marker(getRandomPoint(), { icon: getWeatherIcon() }));
          }
          return batch;
        }
        var mgr = new google.extensions.maps.MarkerManager(map);
        mgr.addMarkers(getWeatherMarkers(20), 3);
        mgr.addMarkers(getWeatherMarkers(200), 6);
        mgr.addMarkers(getWeatherMarkers(1000), 8);
        mgr.refresh();
      }
    </script>
  </head>
  <body>
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>